<template>
    <div>
        <h3>房号列表</h3>

        <input type="button" value="批量删除" @click="delall" class="btn btn-danger">
        <input type="button" value="批量上架" @click="updall(1)" class="btn btn-warning">
        <input type="button" value="批量下架" @click="updall(0)" class="btn btn-primary">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" @click="headall" v-model="checked">
                    </td>
                    <td>房型名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                </tr>
                <tr v-for="item in data.list">
                    <td>
                        <input type="checkbox" @change="bodyall" :value="item.Id" v-model="ids">
                    </td>
                    <td>{{ item.HouseName }}</td>
                    <td>{{ item.HouseNoName }}</td>
                    <td>{{ item.HouseNoDesc }}</td>
                    <td>{{ item.State==1?"上架":"下架" }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();
let data:any=reactive({
    list:[]
})
let checked=ref();
let ids=ref([]);

onMounted(()=>{
    getHouseNo();
})
//批量删除
const delall=()=>{
    if(confirm('确定删除吗')){
        axios({
            method:"delete",
            url:"/api/House/Delall",
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功')
                ids.value=[];
                checked.value=""
                getHouseNo();
            }
        })
    }
}
//批量上架下架
const updall=(state:any)=>{
    if(confirm('确定修改吗')){
        axios({
            method:"get",
            url:"/api/House/Updall",
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('修改成功')
                ids.value=[];
                checked.value=""
                getHouseNo();
            }
        })
    }
}

//全选全不选
const headall=()=>{
    checked.value=!checked.value
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.Id
        })
    }
    else{
        ids.value=[]
    }
}
//反选
const bodyall=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false
    }
}


const getHouseNo=()=>{
    axios({
        method:"get",
        url:"/api/House/ShowHouseNo"
    })
    .then(res=>{
        console.log(res)
        data.list=res.data;
    })
}


</script>

<style scoped>

</style>